<template>
    <div class="frameTable">
        <div class="other_opera display-flex">
            <div class="left_opera ver-mid flex-group-1">
                <button v-for="(item,index) in left_opera" :key="index" :class="item.class" @click="leftOperaActive(item)" v-html="item.text"></button>
                <!-- <button class="btn_sm primary_btn">添加</button> -->
                <!-- <button class="btn_sm default_btn_nobg">导出</button> -->
            </div>
            <div class="column_screen ver-mid flex-group-1">
                <button class="btn_sm primary_btn"  @click="showSet()">
                    配置
                    <i class="bi bi-gear"></i>
                </button>
                <transition name="set_list">
                    <div class="set_list" v-show="setFlag"> 
                        <div v-for="(item,index) in column" :key="index" >
                            <label style="cursor:pointer;">
                                <input class="ver-mid" type="checkbox" :checked="item.visible == true" v-model="item.visible" @click="change(item)"/>
                                <span class="ver-mid" style="margin-left:5px;">{{item.label}}</span>
                            </label>
                        </div>
                    </div>
                </transition>
                
            </div>
            
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th v-if="operation.length > 0">#</th>
                    <th v-for="(item,index) in column==null?[]:column" :key="index" v-show="item.visible" :style="'text-align:'+item.text_align">{{item.label}}</th>
                    <th v-if="operation.length > 0">操作</th>
                    
                </tr>
            </thead>
            <transition name="tbody_tran">
                <tbody v-if="data != null && data.length>0" ref="tbody">
                    <tr v-for="(item,index) in data" :key="index">
                        <td>{{index+1}}</td>
                        <td v-for="index in column.length" 
                            :key="index" v-show="column[index-1].visible" 
                            :style="'text-align:'+column[index-1].text_align">
                            <span v-if="column[index-1].bool != undefined && column[index-1].bool != null">
                                <span v-if="item[column[index-1].prop] == undefined || item[column[index-1].prop] == null">
                                    --
                                </span>
                                <g-onoff :data="item[column[index-1].prop]" v-else></g-onoff>
                            </span>
                            <span v-else-if="column[index-1].img != undefined && column[index-1].img != null">
                                <span v-if="item[column[index-1].prop] == undefined || item[column[index-1].prop] == null ">
                                --
                                </span>
                                <div class="img_div" v-else>
                                    <img :src="item[column[index-1].prop]" style="width:50px;height: 50px;">
                                </div>
                                
                            </span>
                            <span v-else>
                                <span v-if="item[column[index-1].prop] == undefined || item[column[index-1].prop] == null">
                                    --
                                </span>
                                <div v-html="item[column[index-1].prop] == null || item[column[index-1].prop].length == 0?'--':item[column[index-1].prop]" v-else></div>
                            </span>
                                
                        </td>

                        <td v-if="operation.length>0" style="position:relative;">
                            <button v-for="(opItem,opIndex) in operation" class="inline-block"
                                @click="active(opItem.fun,item)"
                                :style="opItem.style"
                                :key="opIndex+Math.random()" 
                                :class="opItem.class"
                                v-html="opItem.text"></button>
                            <button class="btn_sm default_btn_nobg more_btn" v-if="moreOpera != null && moreOpera.length > 0" style="border:none;"><i class="bi bi-chevron-down"></i></button>
                            <div class="more_opera" v-if="moreOpera != null && moreOpera.length > 0">
                                <div v-for="(more_oper,index) in moreOpera" :key="index">
                                    <button class="btn_sm" @click="operaActive(more_oper,item)" v-html="more_oper.text"></button>
                                </div>
                            </div>
                        </td>
                        
                    </tr>
                </tbody>
            </transition>
            
            <tfoot>
                
            </tfoot>
        </table>
        
        
    </div>
    
</template>
<script>
import {ref,watch,nextTick} from 'vue'
export default {
    name:'g-table',
    props:{
        table_data:{
            type:Object,
            default:{}
        },
        fun:{
            type:Object,
            default:{}
        }
    },
    setup(props){
        let column = ref(props.table_data.column);
        let data = ref(props.table_data.data);
        let moreOpera = ref(props.table_data.moreOpera);
     
        
        let operation = ref(props.table_data.operation);
        let left_opera = ref(props.table_data.left_opera);

        let moreOperaCss = ref({});

        watch(()=>props.table_data.data,(value)=>{
            data.value = null;
            setTimeout(() => {
                data.value = value;            
            }, 300);
        })

        let setFlag = ref(false);

        // 顶部左侧操作栏的按钮回调
        let leftOperaActive = (item)=>{
            item.fun(item.payload);
        }
        // tr右侧操作按钮的回调
        let active = (fun,item)=>{
            fun(item);
        }
        // 配置框显示标识
        let showSet = ()=>{
            setFlag.value = !setFlag.value;
        }
        // 配置框内复选框选中事件
        let change = (item)=>{
            column.value.forEach(n => {
                if(n.prop == item.prop){
                    n.visible = !n.visible;
                }
            });
        }

        // tr中更多操作按钮回调
        let operaActive = (more_oper,item)=>{
            more_oper.fun(item);
        }

        return {
            // 变量
            moreOperaCss,moreOpera,
            active,column,data,operation,left_opera,
            // 方法
            change,setFlag,showSet,leftOperaActive,operaActive
        }

    }
}
</script>
<style>
    .frameTable{
        clear: both;
    }
    .other_opera{
        color: var(--default-font-color);
        position: relative;
        float: right;
        width: 100%;
        
    }

    .column_screen{
        text-align: right;
    }
    .set_list{
        z-index: 99999;
        text-align: left;
        position: absolute;
        right: 20px;
        width: auto;
        background-color: var(--default-background);
        max-width: 300px;
        border-radius: 5px;
        background-color: #ffffff;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    }
    .set_list>div{
        width: 100px;
        padding: 5px 10px;
        font-size: 13px;
    }
    tbody{
        
    }
    .img_div{
        width: 50px;
        height: 50px;
        position: relative;
        overflow: hidden;
       margin: auto;

    }
    .img_div img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    

    .set_list-enter-active,
    .set_list-leave-active{
        transition: all 0.3s;
    }
    .set_list-enter-from,
    .set_list-leave-to{
        opacity: 0;
    }

    /* *********************** */
    .tbody_tran-enter-active,
    .tbody_tran-leave-active{
        transition: all 0.3s;
    }
    .tbody_tran-enter-from,
    .tbody_tran-leave-to{
        opacity: 0;
    }
    /* ****************** */
    .more_opera_tran-enter-active,
    .more_opera_tran-leave-active{
        transition: all 0.3s;
    }
    .more_opera_tran-enter-from,
    .more_opera_tran-leave-to{
        opacity: 0;
    }
</style>